<script lang="ts" setup>
import { ref } from 'vue';
import ScrollList from './components/scroll-list.vue';

// 标签索引值
const tabIndex = ref(0)


// 标签页数据
const orderTabs = ref<{ label: string, type: number, isKeepalive: boolean }[]>([
  { label: '极速问诊', type: 2, isKeepalive: true },
  { label: '问医生', type: 1, isKeepalive: false },
  { label: '开药问诊', type: 3, isKeepalive: false },
])

// 标签页切换
const handleTabChange = (index: number) => {
  tabIndex.value = index
  // 渲染索引对应的组件
  orderTabs.value[index].isKeepalive = true
}
</script>

<template>
  <view class="consult-page">
    <view class="consult-status-tabs">
      <!-- 自定义标签页组件 -->
      <custom-tab :data="orderTabs" @change="handleTabChange"></custom-tab>
    </view>

    <!-- 循环出多个订单列表 -->
    <template v-for="(tab, index) in orderTabs" :key="tab.label">
      <view v-show="tabIndex === index">{{ tab.label }} {{ tab.isKeepalive }}</view>
      <!-- 
        keep-alive 缓存组件在小程序端不支持，自己实现组件 缓存+显隐 效果
          通过 v-if   是否创建组件
          通过 v-show 显示或隐藏组件
      -->
      <ScrollList v-if="tab.isKeepalive" v-show="tabIndex === index" :type="tab.type" />
    </template>
  </view>
</template>

<style lang="scss">
</style>
